<template>
    <ul class="list4">
            <li  v-for="(item,index) in arr" :key='index' @click="handleClick(index)"

            :class="{active:currentIndex==index}"
            >{{item}}</li>
         
        </ul>
</template>

<script>
export default {
    data(){
        return{
            currentIndex:0,
            arr:['首页','订单','我的']
        }
    },
    methods:{
        handleClick(index){
          this.currentIndex = index;
        }
    }
}
</script>

<style>
  .list4{
  
    position: fixed;
    bottom: 10px;
    left: 0;
    display: flex;
    justify-content: space-around;
    width: 90%;
    border-top: 1px solid black;
    padding: 15px;
  }
    .list4 .active{
        background-color: aqua;
    }
</style>